<template>
  <div class="app-container">
    <el-card class="filter-container" shadow="never">
      <div>
        <i class="el-icon-search"></i>
        <span>筛选搜索</span>



          <el-button
            type="primary"
            icon="el-icon-plus"
            slot="reference"
            @click="handleAddDialog"
            style="float:right;margin-right:15px"
            size="mini">
            新增
          </el-button>

          <el-button
            type="warning"
            slot="reference"
            icon="el-icon-edit"
            style="float:right;margin-right:15px"
            @click="handleUpdateDialog"
            size="mini">
            修改
          </el-button>


        <el-button
          type="danger"
          slot="reference"
          icon="el-icon-delete"
          style="float:right;margin-right:15px"
          @click="handleDelete"
          size="mini">
          删除
        </el-button>

      </div>
    </el-card>

    <div class="table-container">
    <!--展示树形表格-->
    <el-tree :data="professionTreeData"  @node-click="handleNodeClick"></el-tree>
    <!--展示树形表格-->
    </div>

    <!--新增专业对话框-->
    <el-dialog
      title="新增专业对话框"
      :close-on-click-modal="false"
      :visible.sync="dialogFormVisible"
      width="600px"
      :before-close="handleAddFormClose">

      <el-form :model="formData" :rules="rule" ref="dataAddForm">


        <el-form-item label="专业方向" prop="name" label-width="100px">
          <el-input v-model="formData.name" autocomplete="off"></el-input>
          <el-alert
            title="专业名称/学科分类"
            :closable="false"
            type="info"
            style="line-height: 12px;">
          </el-alert>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleAddFormClose()">取 消</el-button>
        <el-button type="primary" @click="handleAdd('dataAddForm')">确 定</el-button>
      </div>
    </el-dialog>
    <!--新增专业对话框-->


    <!--修改专业对话框-->
    <el-dialog
      title="修改专业对话框"
      :visible.sync="dialogFormVisible4Edit"
      width="600px"
      :close-on-click-modal="false"
      :before-close="handleEditFormClose">

      <el-form  ref="dataEditForm" :model="formData"  :rules="rule">
        <el-form-item label="专业方向" prop="name" label-width="100px">
          <el-input v-model="formData.name" autocomplete="off"></el-input>
          <el-alert
            title="专业名称/学科分类"
            :closable="false"
            type="info"
            style="line-height: 12px;">
          </el-alert>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="handleEditFormClose()">取 消</el-button>
        <el-button type="primary" @click="handleEdit('dataEditForm')">确 定</el-button>
      </div>


    </el-dialog>
    <!--修改专业对话框-->



  </div>
</template>

<script>
import {save,deleteProfession,update,findById,getProfessionTree,findAll} from '@/api/profession';
export default {
  name: "index",
  data() {
    return {
      formData: {},//表单数据
      dialogFormVisible: false,//增加表单是否可见
      dialogFormVisible4Edit:false,//编辑表单是否可见
      professionTreeData:  [], //专业树数据模型
      selectNode:null,//选中节点的数据
      rule: {
        name: [{required: true, message: '请输入专业名称', trigger: 'blur'}],
      },//表单的校验规则
    }
  },

  created() {
    this.getProfessionTree()
  },
  methods: {
    //处理树形节点点击
    handleNodeClick(data) {
      console.info(`【====检测到当前用户点击了专业树====】`);
      this.selectNode = data
    },

    //弹出添加窗口的方法
    handleAddDialog() {
      this.resetForm();
      this.dialogFormVisible = true;
    },
    //级联点击选择触发本方法
    handleChange(value) {
      //把专业ID赋值给form表单
      console.info("====系统感知学生选择了级联专业树的专业ID{}，赋值给form表单=======",value[1])
      this.formData.professionId = value[1]
    },
    //处理添加的方法
    handleAdd(formName) {
      console.info("【系统正在进行增加专业....】")
      //判断该父ID是否为空？
      if (this.selectNode){ //如果为空则用户没有选择专业树,视为添加根专业
        this.formData.parentId = this.selectNode.id
      }else {
        this.formData.parentId = 0
      }

      //表单校验
      this.$refs[formName].validate((valid) => {
        if (valid) {//成功
          save(this.formData).then(res=>{
            //弹出提示框，显示成功信息
            this.$message({
              showClose: true,
              message: '恭喜你，操作成功',
              type: 'success',
              onClose: () => {

              }
          });

            //将选中节点数据置于空
            this.selectNode = null

            //关闭新增窗口
            this.dialogFormVisible = false

            //清空表单数据
            this.resetForm()

            //刷新专业树数据
            this.getProfessionTree();

          });
        }
      })
      console.info("【======系统增加专业成功！====】")
    },
    //关闭新增表单窗口的方法
    handleAddFormClose() {
      this.dialogFormVisible = false
      this.resetForm();
    },
    //弹出编辑窗口的方法
    handleUpdateDialog() {
      if (this.selectNode){
        console.info("【====系统正在弹出的修改专业窗口====】")
        this.resetForm();
        this.dialogFormVisible4Edit = true;
        findById(this.selectNode.id).then(res=>{this.formData = res.data;})
        console.info(`====【系统正在弹出的修改专业窗口成功！！并成功获取了ID为：${this.selectNode.id}的用户详情=====`)
      }else {
        this.$message({
          showClose: true,
          message: '请选择一个专业条目进行修改',
          type: 'warning',
          onClose: () => {
            //将选中节点数据值为空
            this.selectNode = null
          }
        })
      }


    },
    //处理修改的方法
    handleEdit(formName) {
      //表单校验
      this.$refs[formName].validate((valid) => {
        console.info("【系统正在进行修改专业....】")
        if (valid) {
          update(this.formData).then(res=>{
            //弹出成功框，显示成功信息
            this.$message({
              showClose: true,
              message: '恭喜你，操作成功',
              type: 'success',
              onClose: () => {
                this.getProfessionTree()
              }
            });
            this.dialogFormVisible4Edit = false;
            this.resetForm()
            this.getProfessionTree()
            console.info("【系统成功修改专业....】")
          });
        }
      });
    },
    //关闭修改表单窗口的方法
    handleEditFormClose(){
      this.dialogFormVisible4Edit = false
      this.resetForm();
    },
    //获取专业树的方法
    getProfessionTree(){
      console.log("【==系统正在获取专业树==】")
      getProfessionTree().then(res=>{this.professionTreeData = res.data})
      console.log("【==系统正在成功获取专业树==】")
    },
    //重置表单的方法
    resetForm() {
      this.formData = {}
    },
    //处理删除的方法
    handleDelete() {
      if (this.selectNode){
        console.info("====系统正在处理删除专业树中=====")
        this.$confirm(`此操作将【永久删除】该${this.selectNode.name}专业, 是否继续?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          deleteProfession(this.selectNode.id).then(res=>{
            this.$message({
              showClose: true,
              message: '恭喜你，操作成功',
              type: 'success',
              onClose: () => {
                this.selectNode = null
              }
          })
         this.getProfessionTree()
          })
        }).catch(() => {
          // 点击取消后调用
          // 空着，防止报错
        })
        console.info("====系统正在处理成功删除专业树中=====")
      }else {
        this.$message({
          showClose: true,
          message: '请选择一个专业条目进行删除',
          type: 'warning',
          onClose: () => {
            //将选中节点数据值为空
            this.selectNode = null
          }
        })
      }



    },


  }
}
</script>

<style scoped>

</style>
